<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
	================================================== -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HIDEO HTML5, CSS3, responsive, Bootstrap 3 website
	template</title>
<link href="custom/css/login.css" rel="stylesheet">


</head>
<body class="header1 activateAppearAnimation">
	<!-- Primary Page Layout 
	===============================s=================== -->
	<!-- globalWrapper -->
	<div id="globalWrapper">
		<jsp:include page="core/template/HEADER_LOGIN.jsp"></jsp:include>
		<header class="page-header">
			<div class="container">
				<div class="row">
					<div class="col-sm-6">
						<h1>Assign Job</h1>
					</div>

				</div>
			</div>
		</header>
		<!-- Content -->
		<section id="content" style="background: url('core/images/feature.png') repeat;">
			<div class="container">
				<div class="row mt30">
					<div class="col-md-12">
						<h2>ประกาศบริการ ฟรี</h2>
					</div>
				</div>
				<div class="row mb30 mt15">
					<div class="col-md-9">
						<div class="row">
							<div class="col-md-12 mb15">
								<div class="ctaBox color1">
									<div class="row">
										<h3>
											<span class="label label-info"><b>ขั้นตอนที่ 1.</b></span>
											ระบุรายละเอียดของบริการ
										</h3>
									</div>
									<div class="row mt15 boxFocus color0">

										<div class="row mt05">
											<div class="col-md-3">
												<b>ชื่อบริการ :</b>
											</div>
											<div class="col-md-9">
												<input type="text" class="form-control" id=""
													placeholder="กรุณากรอกชื่อบริการให้ชัดเจน"
													onchange="spanShowInput('#inp_JobName','#span_showJobName');">
											</div>

										</div>
										<div class="row mt05">
											<div class="col-md-3">
												<b>ทักษะความสามารถที่เกี่ยวข้อง :</b>
											</div>
											<div class="col-md-9">
												<input type="text" class="form-control"
													placeholder="กรุณาระบุชื่องานให้ชัดเจน" id="inp_Ability"
													onchange="spanShowInput('#inp_Ability','#span_showAbility');">
											</div>

										</div>
										<div class="row mt05">
											<div class="col-md-3">
												<b>รายละเอียดของบริการ</b>
											</div>
											<div class="col-md-9">
												<textarea rows="6" class="form-control"
													placeholder="กรุณาระบุรายละเอียดของงานให้ชัดเจน"
													id="txtArea_JobDetail"
													onchange="spanShowInput('#txtArea_JobDetail','#span_showJobDetail');"></textarea>
											</div>
										</div>
									</div>
									<div class="row mt15">
										<h3>
											<span class="label label-info"><b>ขั้นตอนที่ 2.</b></span>
											รายละเอียดค่าบริการ
										</h3>
									</div>
									<div class="row mt15 boxFocus color0">


										<div class="row mt05">
											<div class="col-md-3">
												<b>รายละเอียดค่าบริการ</b>
											</div>

											<div class="col-md-9">
												<textarea rows="6" class="form-control"
													placeholder="กรุณาระบุรายละเอียดของงานให้ชัดเจน"
													id="txtArea_JobDetail"
													onchange="spanShowInput('#txtArea_JobDetail','#span_showJobDetail');"></textarea>
												<p>
													<small><b>ตัวอย่าง : </b>วันละ 300 บาท, ชั่วโมงละ
														200 บาท , ครั้งละ 100 บาท</small>
												</p>
											</div>
										</div>
									</div>
									<div class="row mt15">
										<div class="col-md-12">
											<div class="checkbox">
												<label class="font4"> <input type="checkbox"
													name="x">
													ข้าพเจ้าได้รับทราบและยืนยันตกลงตามเงื่อนไข ข้อตกลง
													ค่าธรรมเนียมการให้บริการข้างต้น
												</label>
											</div>
											<div align="center">
												<button type="button"
													class="btn btn-labeled btn-success font5">
													<span class="btn-label"><i
														class="glyphicon glyphicon-ok"></i></span>ยืนยันการว่าจ้างงาน
												</button>
												<button type="button"
													class="btn btn-labeled btn-danger font5">
													<span class="btn-label"><i
														class="glyphicon glyphicon-remove"></i></span>ยกเลิกการว่าจ้างงาน
												</button>
											</div>
										</div>
									</div>
								</div>

							</div>
						</div>
					</div>
					<div class="col-md-3">
						<div class="row col-md-12 mt15 boxFocus color1"
							style="margin: auto;">
							<div class="row">
								<div class="col-md-12">
									<div>
										<input type="text" class=" form-control "
											placeholder="ระบุบริการที่ต้องการค้นหา">
									</div>
								</div>
							</div>
							<div class="row mt05">
								<div class="col-md-12">
									<div>หมวดหมู่บริการ</div>
									<div>
										<select class="form-control ">
											<option>--- เลือก ---</option>
											<option>เชียงใหม่</option>
											<option>เชียงราย</option>
											<option>แพร่</option>
											<option>น่าน</option>
											<option>ลำปาง</option>
										</select>
									</div>
								</div>
							</div>
							<div class="row mt05">
								<div class="col-md-12">
									<div>จังหวัดของผู้ให้บริการ</div>
									<div>
										<select class="form-control ">
											<option>--- เลือก ---</option>
											<option>เชียงใหม่</option>
											<option>เชียงราย</option>
											<option>แพร่</option>
											<option>น่าน</option>
											<option>ลำปาง</option>
										</select>
									</div>
								</div>
							</div>
							<div class="row mt05">
								<div class="col-md-12">
									<div>ระดับความน่าเชื่อถือของบริการ</div>
									<div>
										<select class="form-control ">
											<option>--- เลือก ---</option>
											<option>ระดับที่ 5 มากสุด</option>
											<option>ระดับที่ 4 มาก</option>
											<option>ระดับที่ 3 ปานกลาง</option>
											<option>ระดับที่ 2 พอใช้</option>
											<option>ระดับที่ 1 น้อยสุด</option>
										</select>
									</div>
								</div>
							</div>
							<div class="row mt05">
								<div class="col-md-12">
									<div>ราคาค่าบริการ</div>
									<div>
										<select class="form-control ">
											<option>--- เลือก ---</option>
											<option>0-1000 ฿</option>
											<option>1,000-5,000 ฿</option>
											<option>5,000-10,000 ฿</option>
											<option>10,000-20,000 ฿</option>
											<option>20,000-50,000 ฿</option>
											<option>สูงกว่า 50,000 ฿</option>
										</select>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-12">
									<button type="button"
										class="col-md-12 col-xs-12 col-sm-12 btn btn-info mt15">
										<div>
											<i class="icon-search"></i><span class="font3">
												ค้นหาบริการ</span>
										</div>
									</button>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 mt15">
								<div class="row">
									<div class="col-md-12">
										<span class="font4"><b>หมวดหมู่บริการ</b></span>
									</div>
								</div>
								<div class="row mt05">
									<div class="col-md-12">
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_imac.png" alt=""
													style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>ไอทีและการพัฒนาซอฟต์แวร์</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_palette.png" alt=""
													style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>การออกแบบ</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_book.png" alt=""
													style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>การแปลภาษา</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_pencil.png" alt=""
													style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>งานเขียนและการรวบรวมเนื้อหา</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_sketchbook.png"
													alt="" style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>โปรเจ็ก/โครงงาน</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_camera.png" alt=""
													style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>ภาพถ่าย/กราฟฟิค</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_user5.png" alt=""
													style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>การคีย์ข้อมูลเอกสาร</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_tree-money.png"
													alt="" style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>ธุรการ
																บริหารและการบัญชี</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_shopping-bag-full.png"
													alt="" style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>สินค้าและบริการ</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_molecular.png" alt=""
													style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>วิทยาศาสตร์</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
										<div class="col-md-12 col-xs-6 col-sm-6 mt05">
											<div class="media">
												<a class="pull-left" href="#"><img
													class="img-circle img-responsive"
													src="custom/images/icon/Flatistic/256_user8.png" alt=""
													style="width: 40px;"> </a>
												<div class="media-body">
													<a href="#"> <span class="font5"><b>สอนพิเศษ</b></span>
													</a><br> <span class="font5">งานที่มีทั้งหมด 4000
														งาน</span>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="row mt15 mb05">
									<div class="col-md-12">
										<hr class="lineLines">
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<span class="font4"><b>บริการใหม่ล่าสุด</b></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-12">
										<small><ul class="list-unstyled iconList borderList">
												<li><a href="#" class="">รับเขียนแบบอาคาร
														ขออนุญาตก่อสร้าง แบบ</a></li>
												<li><a href="#" class="">รับพัฒนา Android IOS
														พร้อมระบบ</a></li>
												<li><a href="#" class="">รับเขียนเว็บไซต์
														ดูแลเว็บไซต์ ดูแลแฟนเพจ</a></li>
												<li><a href="#" class="">รับทำ 3D,2D Animation
														Model Character อื่นๆ</a></li>
												<li><a href="#" class="">รับงานออกแบบสื่อสิ่งพิมพ์</a></li>
												<li><a href="#" class="">รับเขียนแบบอาคาร
														ขออนุญาตก่อสร้าง แบบ </a></li>
												<li><a href="#" class="">รับพัฒนา Android IOS
														พร้อมระบบ</a></li>
												<li><a href="#" class="">รับเขียนเว็บไซต์
														ดูแลเว็บไซต์ ดูแลแฟนเพจ</a></li>
												<li><a href="#" class="">รับทำ 3D,2D Animation
														Model Character อื่นๆ</a></li>
												<li><a href="#" class="">รับงานออกแบบสื่อสิ่งพิมพ์</a></li>
												<li><a href="#" class="">รับเขียนแบบอาคาร
														ขออนุญาตก่อสร้าง แบบ</a></li>
												<li><a href="#" class="">รับพัฒนา Android IOS
														พร้อมระบบ</a></li>
												<li><a href="#" class="">รับเขียนเว็บไซต์
														ดูแลเว็บไซต์ ดูแลแฟนเพจ</a></li>
												<li><a href="#" class="">รับทำ 3D,2D Animation
														Model Character อื่นๆ</a></li>
												<li><a href="#" class="">รับงานออกแบบสื่อสิ่งพิมพ์</a></li>
											</ul></small>
									</div>
								</div>

							</div>
						</div>
					</div>


				</div>
			</div>
		</section>
		<!-- End Content -->

		<jsp:include page="core/template/FOOTER.jsp" />
		<script type="text/javascript" src="custom/js/PostJobPage.js"></script>

		<!-- ======================================= content ======================================= -->

	</div>
	<!-- global wrapper -->
	<!-- End Document 
	================================================== -->
</body>
</html>
